// 入口函数
$(function () {
 // 需求1: 初始化文章列表
 //  后面还要用,封装成一个函数
 let layer = layui.layer
 initArtCateList()
 // 封装函数
 function initArtCateList() {
  // 发送请求
  axios({
   method: 'GET',
   url: '/my/article/cates'
  }).then(res => {
   // console.log(res.data);
   // 判断
   if (res.data.status !== 0) {
    return layer.msg(res.data.message)
   }
   // 成功后渲染
   let arr = []
   // 定义一个变量, 做序号 , 循环一次自增1
   let index = 0
   res.data.data.forEach(item => {
    index++
    arr.push(`
          <tr>
          <td>${index}</td>
          <td>${item.name}</td>
          <td>${item.alias}</td>
          <td>
            <button data-id="${item.Id}" type="button" class="btn-edit layui-btn layui-btn-xs">
              编辑</button
            ><button data-id="${item.Id}"
              type="button"
              class="btn-delete layui-btn layui-btn-xs layui-btn-danger"
            >
              删除
            </button>
          </td>
        </tr>
   `)
   })
   // 循环完毕赋值给父元素
   $('tbody').empty().html(arr.join(''))
  })

 }

 // 需求2 : 点击添加,显示对话框
 // 定义添加分类的对话框的索引值
 let indexAdd = null
 $('#btnAdd').on('click', function () {
  indexAdd = layer.open({
   type: 1,
   title: '添加文章分类',
   area: ['500px', '250px'],
   content: `
             <form class="layui-form" id="formAdd">
             <!-- 1 -->
             <div class="layui-form-item">
               <label class="layui-form-label">分类名称</label>
               <div class="layui-input-block">
                 <input
                   type="text"
                   name="name"
                   required
                   lay-verify="required"
                   placeholder="请输入分类名称"
                   autocomplete="off"
                   class="layui-input"
                 />
               </div>
             </div>
             <!-- 2 -->
             <div class="layui-form-item">
               <label class="layui-form-label">分类别名</label>
               <div class="layui-input-block">
                 <input
                   type="text"
                   name="alias"
                   required
                   lay-verify="required"
                   placeholder="请输入分类别名"
                   autocomplete="off"
                   class="layui-input"
                 />
               </div>
             </div>
             <!-- 3 -->
             <div class="layui-form-item">
               <div class="layui-input-block">
                 <button class="layui-btn" lay-submit lay-filter="formDemo">
                   确认添加
                 </button>
                 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
               </div>
             </div>
           </form>
   `
  });

 })

 // 需求3 : 添加文章分类 - 通过事件委托
 $('body').on('submit', '#formAdd', function (e) {
  // 阻止表单默认提交
  e.preventDefault()
  // 发送请求
  axios({
   method: 'POST',
   url: '/my/article/addcates',
   data: $(this).serialize()
  }).then(res => {
   let obj = res.data
   // console.log(obj);
   // 判断 , 成功提示,关闭对话框,   刷新页面
   if (obj.status != 0) {
    return layer.msg(obj.message)
   }
   // 成功提示
   layer.msg('恭喜您,添加文章分类成功')
   // 关闭对话框
   layer.close(indexAdd)
   // 刷新页面
   initArtCateList()
  })
 })

 // 需求4 :  点击按钮编辑 展示对话框框  通过事件委托
 let indexEdit = null
 let form = layui.form
 $('tbody').on('click', '.btn-edit', function () {
  indexEdit = layer.open({
   type: 1,
   title: '修改文章分类',
   area: ['500px', '250px'],
   content: `
             <form class="layui-form" id="formEdit" lay-filter="formEdit">
             <input type="hidden" name="Id">
             <!-- 1 -->
             <div class="layui-form-item">
               <label class="layui-form-label">分类名称</label>
               <div class="layui-input-block">
                 <input
                   type="text"
                   name="name"
                   required
                   lay-verify="required"
                   placeholder="请输入分类名称"
                   autocomplete="off"
                   class="layui-input"
                 />
               </div>
             </div>
             <!-- 2 -->
             <div class="layui-form-item">
               <label class="layui-form-label">分类别名</label>
               <div class="layui-input-block">
                 <input
                   type="text"
                   name="alias"
                   required
                   lay-verify="required"
                   placeholder="请输入分类别名"
                   autocomplete="off"
                   class="layui-input"
                 />
               </div>
             </div>
             <!-- 3 -->
             <div class="layui-form-item">
               <div class="layui-input-block">
                 <button class="layui-btn" lay-submit lay-filter="formDemo">
                   确认修改
                 </button>
                 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
               </div>
             </div>
           </form>
   `
  });

  // 需求5 : 展示当前文章分类信息
  let id = $(this).attr('data-id')
  // 发送请求
  axios({
   method: 'GET',
   url: '/my/article/cates/' + id,

  }).then(res => {
   console.log(res.data);
   // 判断
   if (res.data.status !== 0) {
    return layer.msg(res.data.message)
   }
   // 展示
   form.val('formEdit', res.data.data)

  })

 })
 // 需求5: 修改文章分类, 事件委托!!
 $('body').on('submit', '#formEdit', function (e) {
  // 阻止浏览器默认行为
  e.preventDefault()
  // 更新
  axios({
   method: 'POST',
   url: '/my/article/updatecate',
   data: $('#formEdit').serialize()
  }).then(res => {
   // console.log(res);
   // 判断 
   if (res.data.status != 0) {
    return layer.msg(res.data.message)
   }
   // 成功提示
   layer.msg('恭喜您,修改文章分类成功')
   // 关闭对话框
   layer.close(indexEdit)
   // 刷新页面
   initArtCateList()
  })
 })
 // 需求6:  点击删除 通过事件委托
 $('tbody').on('click', '.btn-delete', function () {
  let id = $(this).attr('data-id')
  layer.confirm('确认删除吗?', {
   icon: 3,
   title: '提示'
  }, function (index) {
   // 发送请求
   axios({
    method: 'GET',
    url: '/my/article/deletecate/' + id,

   }).then(res => {
    // console.log(res);
    // 判断
    if (res.data.status != 0) {
     return layer.msg(res.data.message)
    }
    // 成功提示
    layer.msg('恭喜您,删除文章分类成功!')
    // 重新渲染页面
    initArtCateList()
   })
   // 在axios处理函数外面关闭对话框
   layer.close(index);
  });
 })
})